<template>
    <el-input ref="input"
        class="input-save"
        v-model="model"
        :clearable="clearable"
        :title="model"
        :placeholder="placeholder"
    >
        <template #append>
            <tnxel-button icon="MoreFilled" @click="toSelect"/>
        </template>
    </el-input>
</template>

<script>
import tnx from '@/tnx.js';

export default {
    name: 'InputSave',
    props: {
        modelValue: String,
        title: String,
        defaultPath: String,
        buttonLabel: String,
        filters: Array, // { name: '文本文件', extensions: ['txt'] }
        clearable: Boolean,
        placeholder: String,
    },
    data() {
        return {
            model: this.modelValue,
        };
    },
    watch: {
        model() {
            this.$emit('update:modelValue', this.model);
        },
        modelValue() {
            this.model = this.modelValue;
        }
    },
    mounted() {
        this.$nextTick(() => {
            let input = this.$refs.input.$el.querySelector('input');
            input.readOnly = true;
        });
    },
    methods: {
        toSelect() {
            tnx.util.dialog.save({
                title: this.title,
                defaultPath: this.defaultPath,
                buttonLabel: this.buttonLabel,
                filters: this.filters,
            }).then(value => {
                this.model = value;
            });
        },
    }
}
</script>

<style lang="scss">
.input-save {
    width: 240px;
}
</style>
